<template>
    <div class="page-100 inspection-site-layout">
        <div class="inspection-main-part">
            <TabsComponent
                    :tabs="tabsOne"
                    :current="tabIndex"
                    v-on:tab-switch="switchHandler"/>
        </div>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</template>

<script>
    import TabsComponent from "@/components/TabsComponent.vue";
    export default {
        name: "inspectionSite",
        data() {
            return {
                tabsOne: [
                    {id:1, text:"详情"},
                    {id:2, text:"进度"},
                ],
                tabIndex: 1,
                taskUUid: '',
                taskState: '',
                isShowEvaluateDialog: false,
            }
        },
        components: {
            TabsComponent,
        },
        created() {
            //接受上个页面传值 在实例创建完成后被立即调用
            this.taskUUid = this.$route.params.taskUUid;
            this.taskState = this.$route.params.taskState;
            this.isShowEvaluateDialog = this.$route.params.isShowEvaluateDialog;
            if (this.isShowEvaluateDialog === true) {
                this.tabIndex = 2;
                this.$router.replace({name:'inspectionSiteProgress', params: {taskUUid: this.taskUUid,taskState: this.taskState,isShowEvaluateDialog: this.isShowEvaluateDialog}})
            } else {
                this.$router.replace({name: 'inspectionSiteDetail', params: {taskUUid: this.taskUUid}})
            }
        },
        methods: {
            switchHandler(payload) {
                console.log(payload.index);
                if (payload.index === 0) {
                    this.$router.replace({name:'inspectionSiteDetail', params: {taskUUid: this.taskUUid}})
                } else if (payload.index === 1) {
                    this.$router.replace({name: 'inspectionSiteProgress', params: {taskUUid: this.taskUUid,taskState: this.taskState,isShowEvaluateDialog: false}})
                }
            },
        },
    }
</script>

<style lang="scss">
    .inspection-site-layout {

        .inspection-main-part {
            /*position:sticky;*/
            /*position: -webkit-sticky;*/
            /*top: 0;*/
            /*left: 0;*/
            /*width: 100%;*/
            /*z-index: 999;*/

            z-index:2000;
            position: fixed;
            width: 100%;
            height: 1rem;
            top: 0;
            left: 0;
        }
    }
</style>